<template>
    <div class="container">
        <header>
            <div class="header-content">
                <div class="header-name">测试组件库</div>
            </div>
        </header>
        <div class="content">
            <div class="left">
                <ul class="menu-bar">
                    <li v-for="nv in navigation" @click="changeNav(nv.path)" :class="{active:nv.path == activeNav}">
                        <span></span>
                        {{nv.name}}
                    </li>
                </ul>
            </div>
            <router-view class="right"></router-view>
        </div>
        <div style="clear: both"></div>
    </div>
</template>

<script>
    module.exports = {
        name: 'App',
        data:function () {
            return{
                navigation: [
                    {
                        name: '组件库说明',
                        path: '/test'
                    },
                    {
                        name: '测试分页组件',
                        path: '/page'
                    },
                    {
                        name: '测试下拉框组件',
                        path: '/my-select'
                    },
                    {
                        name: '下拉框组件-模拟',
                        path: '/mn-select'
                    }
                ],
                activeNav: '/mn-select'
            }
        },
        methods:{
            changeNav: function (path) {
                var vm = this;
                vm.activeNav = path;
                this.$router.push(path)
            }
        },
        mounted:function () {
            this.$router.push('/mn-select')
        }
    }
</script>

<style scoped>
    header{
        padding:10px;
        width: 100%;
        background-color: #4a5564;
        color: white;
    }
</style>